<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>公交系统</title>
    <!-- 图标 -->
    <link rel="shortcut icon" href="../static/web/images/favicon.ico" th:href="@{/web/images/favicon.ico}" type="image/x-icon" />
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../static/web/css/bootstrap.min.css" th:href="@{/web/css/bootstrap.min.css}">
    <!--  CSS -->
    <link rel="stylesheet" href="../static/web/style.css" th:href="@{/web/style.css}">
    <!-- 颜色 CSS -->
    <link rel="stylesheet" href="../static/web/css/colors.css" th:href="@{/web/css/colors.css}">
    <!-- ALL VERSION CSS -->
    <link rel="stylesheet" href="../static/web/css/versions.css" th:href="@{/web/css/versions.css}">
    <!-- 响应式 CSS -->
    <link rel="stylesheet" href="../static/web/css/responsive.css" th:href="@{/web/css/responsive.css}">
    <!-- 自定义 CSS -->
    <link rel="stylesheet" href="../static/web/css/custom.css" th:href="@{/web/css/custom.css}">
    <!-- Modernizer for Portfolio -->
    <script src="../static/web/js/modernizer.js" th:src="@{/web/js/modernizer.js}"></script>
    <link rel="stylesheet" href="../static/layui/css/layui.css" th:href="@{/layui/css/layui.css}">
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" th:src="@{https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js}"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js" th:src="@{https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js}"></script>
 </head>
 <body class="realestate_version">
     <!-- 网站进行动画图片 -->
     <div id="preloader">
         <img class="preloader" src="../static/web/images/loaders/loader-realestate.gif" th:src="@{/web/images/loaders/loader-realestate.gif}" alt="">
     </div>
     <!-- 导航 -->
     <header class="header header_style_01" style="background-color: #1f1f1f;">
         <nav class="megamenu navbar navbar-default" data-spy="affix">
             <div class="container-fluid">
                 <div class="navbar-header">
                     <!--手机端导航展开控制按钮-->
                     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                         <!--手机端导航图标-->
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                     </button>
                     <a class="navbar-brand" ><img src="../static/web/images/logos/logo.png" th:Src="@{/web/images/logos/logo.png}" width="220" alt="image" /></a>
                 </div>
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav navbar-right">
                         <li><a data-scroll href="" th:href="@{/}">首页</a></li>
                         <li><a data-scroll href="" th:href="@{/vehicle}">公交信息<span class="hidden-xs">*</span></a></li>
                         <li th:if="!${session.user}"><a data-scroll href="" th:href="@{/view/goLogin}">登录</a></li>
                         <li th:if="${session.user}">
                             <input type="hidden" th:value="${session.user.id}" id="userId">
                             <a href="javascript:;" th:text="|用户名称：${session.user.nickname}|" id="xlmenu" style="color: #fff;font-size: 16px;font-style: normal;text-transform:capitalize "></a>
                         </li>
                         <li  th:if="${session.user} and ${session.user.type==true} ">
                             <a href="javascript:;" th:href="@{/view/goAdminIndex}"  style="color: #fff;font-size: 16px;font-style: normal;text-transform:capitalize ">进入后台</a>
                         </li>
                     </ul>
                 </div>
             </div>
         </nav>
     </header>

     <!--6条公交信息部分-->
     <div id="gallery" class="section wb">
         <div class="sep2"></div>
         <div class="container">
             <div class="section-title row text-center">
                 <div class="col-md-8 col-md-offset-2">
                     <h3>公交信息</h3>
                 </div>
             </div>
             <!--搜索表单-->
             <form class="layui-form layui-form-pane" id="form-search" style="height:300px">
                 <fieldset class="table-search-fieldset">
                     <legend>搜索条件</legend>
                     <div class="layui-form-item">
                         <div class="layui-inline">
                             <label class="layui-form-label">公交名称</label>
                             <div class="layui-input-inline" style="width: 150px;">
                                 <input type="text" name="name" autocomplete="off" class="layui-input">
                             </div>
                         </div>
                         <div class="layui-inline">
                             <label class="layui-form-label">站点</label>
                             <div class="layui-input-inline" style="width: 120px;">
                                 <select name="startSite" lay-verify="" >
                                     <option value="">请选择起点</option>
                                     <option value="010" th:each="item:${siteList}" th:value="${item.id}" th:text="${item.name}">北京</option>
                                 </select>
                             </div>
                             <div class="layui-form-mid">-</div>
                             <div class="layui-input-inline" style="width: 120px;">
                                 <select name="endSite" lay-verify="">
                                     <option value="">请选择终点</option>
                                     <option value="010" th:each="item:${siteList}" th:value="${item.id}" th:text="${item.name}">北京</option>
                                 </select>
                             </div>
                         </div>
                         <div class="layui-inline">
                             <button id="btn-search" lay-submit lay-filter="btn-search-filter" type="button" class="layui-btn layui-btn-radius layui-btn-normal">
                                 <i class="layui-icon layui-icon-search"></i>
                                 搜索
                             </button>
                             <button id="btn-reset"  type="reset" class="layui-btn layui-btn-radius layui-btn-primary">
                                 <i class="layui-icon layui-icon-fonts-clear"></i>
                                 清空条件
                             </button>
                         </div>
                     </div>
                 </fieldset>
             </form>
             <div id="da-thumbs" class="da-thumbs portfolio" >
                 <div class="post-media pitem item-w1 item-h1 cat1" th:each="item : ${WebVehicleList}">
                     <a href="" th:href="@{/getVehicle/}+${item.id}" >
                         <img th:Src="@{/web/images/20180923092418755.jpg}" alt="" class="img-responsive">
                         <div style="align-items:center; display: -webkit-flex;">
                             <p style="text-align: center;margin:0 auto;color: #fff;font-size: 32px"><span  th:text="${item.name}">asd</span>号公交车</p>
                         </div>
                     </a>
                 </div>
             </div>

         </div>
     </div>
     <!-- 底部 -->
     <div class="copyrights">
         <div class="container">
             <div class="footer-distributed">
                 <div class="footer-left">
                     <p class="footer-links">
                         <a href="#" th:href="@{/}">首页</a>
                         <a href="#" th:href="@{/vehicle}">公交信息</a>
                     </p>
                     <p class="footer-company-name">Copyright &copy; 2021.Company name All rights reserved.</p>
                 </div>

             </div>
         </div>
     </div>
     <a href="#home" data-scroll class="dmtop global-radius"><i class="fa fa-angle-up"></i></a>
     <script src="../static/web/js/all.js" th:src="@{/web/js/all.js}"></script>
     <script src="../static/web/js/custom.js"  th:src="@{/web/js/custom.js}"></script>
     <script src="../static/web/js/portfolio.js"  th:src="@{/web/js/portfolio.js}"></script>
     <script src="../static/web/js/hoverdir.js"  th:src="@{/web/js/hoverdir.js}"></script>

 <script src="../static/layui/layui.js" th:src="@{/layui/layui.js}"></script>
 <script>
     layui.use(['layer', 'form','dropdown'], function(){
         var layer = layui.layer
             ,form = layui.form;
         var dropdown = layui.dropdown;
         var $ = layui.jquery;

         form.on('submit(btn-search-filter)', function(data){
             $.ajax({
                 type:"get",
                 url:"/goInquireVehicle",
                 data:{name:data.field.name,startSite: data.field.startSite,endSite: data.field.endSite},
                 dataType:"json",
                 success : function (data) {
                     console.log(1)
                     if (data.code === "200") {
                         window.location.href="/inquireVehicle"
                     }
                     else if(data.code === "300") {
                         layer.alert(data.message);
                     } else {
                         layer.msg(data.message,{icon:2,time:1000});
                     }
                 }
             })
         });
         /*个人信息弹出层*/
         var setTop=function (url) {
             var that = this;
             //多窗口模式，层叠置顶
             layer.open({
                 type: 2 //此处以iframe举例
                 ,
                 title: '个人信息'
                 ,
                 area: [$(window).height()*0.8+'px', $(window).width()*0.4 +'px']
                 ,
                 shade: 0
                 ,
                 maxmin: true
                 ,
                 offset: '100px'
                 ,
                 content:[url, 'no']
                 ,

                 yes: function () {
                     $(that).click();
                 }
                 ,
                 btn2: function () {
                     layer.closeAll();
                 }
                 ,
                 zIndex: layer.zIndex //重点1
                 ,
                 success: function (layero, index) {
                     layer.setTop(layero); //重点2. 保持选中窗口置顶
                     //记录索引，以便按 esc 键关闭。事件见代码最末尾处。
                     layer.escIndex = layer.escIndex || [];
                     layer.escIndex.unshift(index);
                     //选中当前层时，将当前层索引放置在首位
                     layero.on('mousedown', function () {
                         var _index = layer.escIndex.indexOf(index);
                         if (_index !== -1) {
                             layer.escIndex.splice(_index, 1); //删除原有索引
                         }
                         layer.escIndex.unshift(index); //将索引插入到数组首位
                     });
                 }
                 ,
                 end: function () {
                     //更新索引
                     if (typeof layer.escIndex === 'object') {
                         layer.escIndex.splice(0, 1);
                     }
                 }
             });
         }

         /*下拉菜单*/
         dropdown.render({
             elem: '#xlmenu' //可绑定在任意元素中，此处以上述按钮为例
             ,data: [
                 {
                 title: '个人信息'
                 ,id: 1
                 ,href: '#'
                },
                {
                 title: '退出登录'
                 ,id: 101
                 ,href: '/login/logout' //开启超链接
                }
             ]
             ,id: 'demo1'
             //菜单被点击的事件
             ,click: function(obj){
                 /*弹出个人信息弹窗*/
                 if (obj.id===1) {
                     var id=$("#userId").val();
                     var url='/goUser/'+id;
                   console.log($(window).height())
                    setTop(url)
                 }
             }
         });
     });

 </script>
 </body>
 </html>
